<template>
    <div>
        <van-nav-bar title="分类" left-text="返回" right-text="搜索" left-arrow @click-left="proxy.$leftClick()" @click-right="router.push({name:'three'})"/>
        <div class="dis">
            <div class="nei">
                <van-sidebar v-model="active" @change="changes"> 
                <template v-for="item in store.dataList" :key="item">
                    <van-sidebar-item :title="item" />
                </template>
            </van-sidebar>
            </div>

            <div class="child" >
                <div class="child-title">热门品牌</div>
                <template v-for="item in store.rmData">
                    <van-tag type="primary"  size="large" @click="clicks(item.brand)">{{ item.brand }}</van-tag>
                    <br>
                    <br>
                </template>
            </div>
            
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance,onBeforeMount } from 'vue'
import {usefenlei} from '../store/fenlei'
import { usefounded } from '@/store/founded';
import router from '@/router';
// 拿到分类的pinia
let store = usefenlei();
// 左侧菜单索引
let active = ref(0);
// 拿到相似商品的pinia
const founded = usefounded();

// 拿到全局注册的事件对象
const { proxy }: any = getCurrentInstance();


onBeforeMount(async ()=>{
    // 获取指定选中菜单的数据 返回当前选中的索引值
    // 如果数据本身不存在 则发送请求
    if(!store.dataList.length){
        let index=await store.fetchGetData();
        active.value = index;
    // 如果数据存在
    }else{
        // 获取上次的选中位置
        let index= await store.found();
        active.value = index
    }

})

const changes = (i:number)=>{
    // 点击左侧菜单的数据 根据索引改变右侧的数据
    store.changeRm(i);
}

const clicks = (name:string)=>{
    // 点击分类数据的tag标签 就根据tag标签数据搜索相关商品
    founded.changeKey(name)
    // 并跳转到搜素相关商品页面
    router.push({name:"founded"})
}
</script>

<style lang="scss">
$width:100vw;
$height:100vh;
.dis{
    width: $width;
    display: flex;
    overflow:hidden;
    top: 0;
    position:absolute;
    padding-top: 12.26667vw;
    padding-bottom:13.3333vw;
    box-sizing: border-box;
    height:100vh;
    width: 100%;
    .child{
        width: $width - 21.333vw;
        padding-left: 20px;
        box-sizing: border-box;
        padding-top: 10px;
        .child-title{
            margin-bottom: 20px;
        }
    }
    .nei{
        overflow-y: scroll;
    }
}
</style>